<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <meta charset="UTF-8">
    <title>帝一流</title>
    <link th:href="@{/static/plugin/bootstrap-table/bootstrap-table.css}" type="text/css" rel="stylesheet">
</head>
<body>
<div layout:fragment="cm-flex" class="cm-flex">
    <div class="cm-breadcrumb-container">
        <ol class="breadcrumb">
            <li><a href="#">宠物管理</a></li>
            <li class="active">设备管理</li>
        </ol>
    </div>
    <form id="cm-search" action="index.html" method="get">
        <input type="search" name="q" autocomplete="off" placeholder="Search...">
    </form>
</div>
<div layout:fragment="content" class="container-fluid">
    <div class="panel panel-default">
        <div class="panel-body auto-height">
            <div class="search-block" id="search-block">
                <form action="#" class="form-group form-horizontal">
                    <div class="row">
                        <div class="col-sm-3 col-md-4">
                            <input type="text" class="form-control" placeholder="宠物" id="search"
                                   data-toggle="completer" data-suggest="true">
                        </div>
                        <div class="col-sm-3 col-md-2">
                            <select id="searchStatus" data-placeholder="设备状态 ..." name="status"
                                    class="form-control chosen-select">
                                <option value=""></option>
                                <option value="0">在线</option>
                                <option value="1">离线</option>
                            </select>
                        </div>
                        <div class="col-sm-2 col-md-1 col-md-offset-2">
                            <button type="button" class="btn btn-primary btn-block" id="doSearch">查询</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="table-panel">
                <div class="btn-group" role="group" id="toolbar">
                    <button type="button" class="btn btn-default" id="addMem"><i class="fa fa-fw fa-plus"></i></button>
                    <button type="button" class="btn btn-default" id="editMem"><i class="fa fa-fw fa-pencil"></i>
                    </button>
                    <button type="button" class="btn btn-default" id="delMem"><i class="fa fa-fw fa-trash-o"></i>
                    </button>
                </div>
                <table id="memTable"></table>
            </div>
        </div>
    </div>
</div>
<div layout:fragment="myJs">
    <script th:src="@{/static/js/jquery-migrate-1.2.1.js}"></script>
    <script th:src="@{/static/plugin/bootstrap-table/bootstrap-table.js}"></script>
    <script th:inline="javascript">
        $(function () {
            var autoHeight = $("div.auto-height").height();
            var rowHeight = $('#search-block').height();
            var tableHeight = autoHeight - rowHeight;
            var $table = $('#memTable');
            $table.bootstrapTable({
                // 条纹
                striped: true,
                height: tableHeight,
                toolbar: '#toolbar',
                pagination: true,
                paginationLoop: false,
                sidePagination: 'server',
                url: /*[[@{/pet/list}]]*/,
                method: 'post',
                contentType: "application/x-www-form-urlencoded",
                dataField: "data",
                queryParamsType: '',
                queryParams: function queryParams(params) {
                    var param = {
                        pageNo: params.pageNumber,
                        pageSize: params.pageSize,
                        search: $('#search').val()
                    };

                    return param;
                },
                formatLoadingMessage: function () {
                    return "正在加载数据中，请稍候……"
                },
                formatShowingRows: function (a, b, c) {
                    return "第 " + a + " / " + b + " 条，共 " + c + " 条 ";
                },
                formatRecordsPerPage: function (a) {
                    return "每页 " + a;
                },
                formatNoMatches: function () {
                    return '没有找到匹配的数据';
                },
                columns: [
                    {
                        field: 'ck',
                        checkbox: true
                    },
                    {
                        field: 'petInfo.name',
                        title: '宠物'
                    },
                    {
                        field: 'petInfo.breed',
                        title: '品种'
                    },
                    {
                        field: 'step',
                        title: '今日步数',
                        align: 'center'
                    },
                    {
                        field: 'voltage',
                        title: '设备电量',
                        align: 'center'
                    },
                    {
                        field: 'status',
                        title: '设备状态',
                        formatter: function (value, row, index) {

                            if (value == 0) {

                                return '<span class="text-danger">离线</span>'
                            }

                            return '<span class="text-success">在线</span>'
                        }
                    },
                    {
                        field: '',
                        title: '位置',
                        align: 'center',
                        formatter: function (value, row, index) {
                            return '<a href="javascript:void(0);" onclick="toMap(this);" data-id="' + row.id + '"><span class="sf-globe" style="display: inline-block;' +
                                'width: 16px;height: 16px;background-size: 16px 16px;"></span></a>';
                        }
                    },
                    {
                        field: 'location',
                        title: '定位状态',
                        formatter: function (value, row, index) {
                            if (value == 1) {

                                return 'GPS定位';
                            } else if (value == 2) {

                                return '基站定位';
                            } else if (value == 3) {

                                return 'WIFI定位';
                            }

                            return '无效定位';
                        }
                    },
                    {
                        field: 'systemTime',
                        title: '最新时间',
                        align: 'center'
                    }
                ]
            });

            $('#doSearch').on('click', function () {
                $table.bootstrapTable("refresh");
            });

            $('#searchStatus').chosen({allow_single_deselect: true});
        })

        function toMap(a) {
            var id = $(a).data('id');
            var url = /*[[@{/home/pet3}]]*/;
            url += '?id=' + id;
            window.location.href = url;
        }
    </script>
</div>
</body>
</html>